<template>
  <div class="main-content">
    <div class="filterBar">
      <div class="top">
        <a-input
          class="searchinput"
          addon-before="实验员名字"
          :disabled="userInfo.role === 1"
          v-model:value="searchInfo.experimenterName"
          placeholder="输入实验员名查询"
          @change="onSearch"
        />
        <a-input
          class="searchinput"
          addon-before="实验室名"
          v-model:value="searchInfo.labName"
          placeholder="输入实验室名查询"
          @change="onSearch"
        />
        <a-input
          class="searchinput"
          addon-before="问题描述"
          v-model:value="searchInfo.problem"
          placeholder="输入问题描述查询"
          @change="onSearch"
        />
      </div>
      <div class="footer">
        <a-input
          class="searchinput"
          addon-before="维修描述"
          v-model:value="searchInfo.repairDescription"
          placeholder="输入维修描述查询"
          @change="onSearch"
        />
        <a-input
          class="searchinput"
          addon-before="教师名"
          v-model:value="searchInfo.teacherName"
          placeholder="输入教师名查询"
          @change="onSearch"
        />
        <a-select
          addon-before="维修状态"
          class="searchinput"
          v-model:value="searchInfo.state"
          :options="stateOptions"
          @change="onSearch"
          placeholder="维修状态查询"
        />
      </div>
    </div>
    <div class="userlist">
      <a-table
        :pagination="pagination"
        :loading="loading"
        @change="handlePageChange"
        :dataSource="dataSource"
        :columns="columnsShow"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operator'">
            <a-space wrap>
              <a-button
                v-if="record.state === 1"
                size="small"
                type="primary"
                @click="
                  () => {
                    beginFixed(record);
                  }
                "
                >开始维修</a-button
              >
              <a-button
                v-if="record.state === 2"
                danger
                size="small"
                @click="
                  () => {
                    completeFixed(record);
                  }
                "
                >完成维修</a-button
              >
            </a-space>
          </template>
          <template v-if="column.key === 'state'">
            <a-tag :color="stateTagMapper[record.state].tagType">{{
              stateTagMapper[record.state].text
            }}</a-tag>
          </template>
        </template>
      </a-table>
    </div>
  </div>
  <a-modal
    title="完成维修信息"
    ok-text="确认"
    cancel-text="取消"
    @ok="postComplete"
    v-model:open="compModalshow"
  >
    <a-form-item>
      <a-textarea
        :auto-size="{ minRows: 5, maxRows: 10 }"
        v-model:value="completeInfo"
      ></a-textarea>
    </a-form-item>
  </a-modal>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";
import {
  beginRepair,
  finishRepair,
  repairLogQueryBatch,
} from "../../api/methods/repairLogReq";
import { columsConfig } from "./config";
import { debounce, omit } from "lodash";
import dayjs from "dayjs";
import { IRepairInfo, IRepairLogReq } from "@/api/RequestIDL/repairLogType";
import { Message } from "@/utils/message";
import { userInfo } from "@/utils/userInfo";
import { roleType } from "@/store/useRole";
const columnsShow = computed(() => {
  if ([3, 0].includes(searchInfo.value.state!)) {
    let len = columsConfig.length;
    return columsConfig.filter((item, index) => {
      return index != len - 1;
    });
  }
  return columsConfig;
});
interface IPagenation {
  current: number;
  pageSize: number;
  total: number;
}
const pagination = computed(() => {
  return {
    total: pageConfig.value.total,
    current: pageConfig.value.page,
    pageSize: pageConfig.value.pageSize,
  };
});
const searchInfo = ref<Omit<IRepairLogReq, "pageSize" | "page">>({
  labName: "",
  state: 1,
  teacherName: "",
  experimenterName: "",
  problem: "",
  repairDescription: "",
});
if (userInfo.value.role === roleType.Experimenter) {
  searchInfo.value.experimenterName = userInfo.value.username;
}
const onSearch = debounce(
  async () => {
    await getRepairLogList();
  },
  500,
  { maxWait: 1000 }
);
const stateTagMapper = [
  { tagType: "green", text: "正常" },
  { tagType: "orange", text: "未维修" },
  { tagType: "red", text: "维修中" },
  { tagType: "blue", text: "已维修" },
];
const getRepairLogList = async () => {
  loading.value = true;
  const res = await repairLogQueryBatch({
    ...searchInfo.value,
    ...omit(pageConfig.value, "total"),
  });
  pageConfig.value.total = res.data.total;
  dataSource.value = res.data.records.map((item: any) => {
    return {
      ...item,
      updateTime: dayjs(item.updateTime).format(
        import.meta.env.APP_FORMAT_TIME
      ),
      createTime: dayjs(item.createTime).format(
        import.meta.env.APP_FORMAT_TIME
      ),
    };
  });
  loading.value = false;
};
const stateOptions = ref([
  { label: "未维修——1", value: 1 },
  { label: "维修中——2", value: 2 },
  { label: "已维修——3", value: 3 },
  { label: "正常——0", value: 0 },
]);
const pageConfig = ref({
  total: 0,
  page: 1,
  pageSize: 10,
});
const loading = ref(false);
const dataSource = ref([]);

const beginFixed = async (item: IRepairInfo) => {
  const res = await beginRepair({ id: item?.id });
  if (res.code === 20000) {
    Message("success", "已经开始维修");
  } else {
    Message("error", "出错请联系管理员");
  }
  await getRepairLogList();
};
const compModalshow = ref(false);
const completeInfo = ref("");
const recordState = ref<IRepairInfo>();
const completeFixed = async (record: IRepairInfo) => {
  completeInfo.value = "";
  compModalshow.value = true;
  recordState.value = record;
};
const postComplete = async () => {
  const res = await finishRepair({
    id: recordState?.value?.id,
    repair_description: completeInfo.value,
  });
  if (res.code === 20000) {
    Message("success", "完成维修！");
  } else {
    Message("error", "出错请联系管理员");
  }
  compModalshow.value = false;
  await getRepairLogList();
};
const handlePageChange = async (pagination: IPagenation) => {
  pageConfig.value.page = pagination.current;
  pageConfig.value.pageSize = pagination.pageSize;
  await getRepairLogList();
};
onMounted(async () => {
  await getRepairLogList();
});
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.main-content {
  .newbtn {
    margin-bottom: 15px;
  }
  .filterBar {
    display: flex;
    flex-direction: column;
    .top {
      display: flex;
      flex-direction: row;
    }
    .footer {
      margin: 10px 0 10px 0;
      display: flex;
      flex-direction: row;
    }
    .searchinput {
      width: 300px;
      margin-right: 10px;
    }
  }
}
</style>
